<template>
  <div class="madp-marketing-detail">
    <div class="user-info">
      <img :src="info.avatar || $defaultAvatar" alt="" srcset="" />
      <div class="info">
        <div class="top">
          <span class="text-one-ellipsis">{{ info.nickName }}</span>
          <span>数据日期：{{ info.dataDate }}</span>
        </div>
        <div class="bottom">浏览时长：{{ info.totalDuration }}秒</div>
      </div>
    </div>
    <div class="container">
      <mescroll-view class="scroll-view" :showMoreBtn="page.current * page.size < page.total" :total="page.total" @getMoreData="getMoreData">
        <div class="info-item" v-for="(item, idx) in dataList" :key="idx">
          <div class="top">
            <span>{{ item.productType }}</span>
            <span class="text-one-ellipsis">{{ item.productName }}</span>
          </div>
          <div class="info">
            <div class="item">
              <span>查看时间(秒)</span>
              <span>{{ item.duration }}</span>
            </div>
            <div class="item" style="margin-left: 10px">
              <span>查看次数(次)</span>
              <span>{{ item.browses }}</span>
            </div>
          </div>
        </div>
      </mescroll-view>
    </div>
    <back-btn />
  </div>
</template>
<script>
import MescrollView from '@/components/material/mescroll-view.vue'
import backBtn from '@/components/back-btn.vue'
import managerViewApi from '@/api/manager-view.js'
export default {
  components: { MescrollView, backBtn },
  data() {
    return {
      info: {},
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      dataList: []
    }
  },
  activated() {
    this.info = JSON.parse(this.$route.query.info)
    this.getMarketingClueDetailsPage()
  },
  created() {},
  mounted() {},
  methods: {
    getMoreData() {
      this.page.current++
      this.getMarketingClueDetailsPage()
    },
    // 营销线索列表
    getMarketingClueDetailsPage() {
      managerViewApi
        .getMarketingClueDetailsPage({
          distinctId: this.info.distinctId,
          current: this.page.current,
          size: this.page.size
        })
        .then((res) => {
          this.info.totalDuration = res.data.data.extraProps.totalDuration
          this.info.dataDate = res.data.data.extraProps.dataDate
          if (this.page.current == 1) {
            this.dataList = res.data.data.records
          } else {
            this.dataList.push(...res.data.data.records)
          }
          this.page.total = res.data.data.total
        })
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-marketing-detail {
  padding: 0 16px;
  padding-top: 16px;
  background: #fafafa;
  .user-info {
    padding: 16px;
    background: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
    border-radius: 8px;
    display: flex;
    z-index: 10;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 8px;
    }
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        display: flex;
        justify-content: space-between;
        :nth-child(1) {
          flex: 1;
          width: 1px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #2c2c2c;
        }
        :nth-child(2) {
          font-size: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(44, 44, 44, 0.5);
        }
      }
      .bottom {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(44, 44, 44, 0.8);
      }
    }
  }
  .scroll-view {
    padding-top: 16px;
    height: calc(100vh - 88px);
  }
  .container {
    .info-item {
      background: #ffffff;
      box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
      border-radius: 8px;
      padding: 23px 16px 16px 16px;
      margin-bottom: 10px;
      .top {
        display: flex;
        align-items: center;
        :nth-child(1) {
          padding: 1px 4px;
          font-size: 10px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffb167;
          border-radius: 4px;
          border: 1px solid #ffc087;
          margin-right: 8px;
        }
        :nth-child(2) {
          flex: 1;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #202020;
        }
      }
      .info {
        padding: 16px 0;
        padding-left: 16px;
        background: #fafafa;
        border-radius: 8px;
        display: flex;
        .item {
          display: flex;
          :nth-child(1) {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(44, 44, 44, 0.5);
          }
          :nth-child(2) {
            width: 45px;
            margin-left: 16px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #2c2c2c;
          }
        }
      }
    }
  }
}
</style>